<template>
  <h1>个人简历练习</h1>
  <table border="1">
  <tr>
<td>照片</td>
    <td>
      <img :src="person.imgUrl" width="150">
    </td>
</tr>
  <tr>
<td>姓名</td>
    <td>
      {{person.name}}
    </td>
</tr>
  <tr>
<td>年龄</td>
    <td>
      {{person.age}}
    </td>
  </tr>
  <tr>
<td>好友</td>
    <td><ul>
      <li v-for="f in person.friends">{{f}}</li>
    </ul></td>
</tr>
  </table>
  <button @click="loadData">点击加载数据</button>
</template>
<script setup>
import {ref} from "vue";

const person = ref({
  name:'',age:'',imgUrl:'',friends:[]
});
const loadData = ()=>{
  person.value = {
    name:'范传奇',
    age:18,
    imgUrl:'fcq.jpg',
    friends:['小王','小李','小赵']
  }
}
</script>


<style scoped>

</style>